<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/personalInfo.css">
</head>
<body>
<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
            <li><a href="./personalInfo.html" class="active">个人信息</a></li>
            <li><a href="./myMedicalRecords.html">我的病历</a></li>
            <li><a href="./registerAppointment.html">在线挂号</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div id="personalInfoSection" class="info-card">
            <h2>个人信息</h2>
            <form id="personalInfoForm">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="avatar">头像</label>
                        <div>
                            <div id="avatarPreview" class="avatar-preview" style="display: none;">
                                <img src="" alt="Avatar">
                            </div>
                            <div id="avatarUpload" class="avatar-upload-area">
                                +
                            </div>
                            <small class="form-text text-muted">点击上传头像</small>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="hidden" id="avatarPath">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="username">账号</label>
                        <input type="text" id="username" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="nickname">昵称</label>
                        <input type="text" id="nickname" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="gender">性别</label>
                        <select id="gender">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="age">年龄</label>
                        <input type="text" id="age" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="phone">手机号码</label>
                        <input type="text" id="phone" >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="email">邮箱</label>
                        <input type="text" id="email" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="history">既往史</label>
                        <div class="input-group">
                            <input type="text" id="history" readonly>
                            <button type="button" class="btn-outline-primary apply-update-btn" data-field="history">申请修改</button>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="allergy">过敏史</label>
                        <div class="input-group">
                            <input type="text" id="allergy" readonly>
                            <button type="button" class="btn-outline-primary apply-update-btn" data-field="allergy">申请修改</button>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-secondary" id="modifyInfoButton" style="margin-top: 15px;">修改</button>
            </form>
        </div>
    </div>
</div>
<!-- 原生弹窗 -->
<div id="applyUpdateModal" class="modal-mask" style="display:none;">
    <div class="modal-box">
        <div class="modal-header">
            <span class="modal-title" id="applyUpdateModalLabel">申请修改</span>
            <span class="modal-close" id="closeModalBtn">×</span>
        </div>
        <div class="modal-body">
            <form id="applyUpdateForm">
                <div class="mb-3">
                    <label id="updateFieldLabel" class="form-label"></label>
                    <input type="text" id="newValueInput" required>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-secondary" id="cancelModalBtn">取消</button>
            <button type="button" class="btn-outline-primary" id="submitUpdateBtn">提交申请</button>
        </div>
    </div>
</div>
<script>
    $(function(){
        // 获取当前用户信息
        function loadUserInfo() {
            $.ajax({
                url: 'http://localhost:8080/user/current',
                type: 'GET',
                xhrFields: {
                    withCredentials: true  // 👈 添加这行
                },
                success: function(res) {
                    if(res.code === 0 && res.data) {
                        $('#username').val(res.data.username);
                        $('#nickname').val(res.data.nickname);
                        $('#gender').val(res.data.gender);
                        $('#age').val(res.data.age || '');
                        $('#phone').val(res.data.phone || '');
                        $('#email').val(res.data.email || '');
                        $('#history').val(res.data.history || '');
                        $('#allergy').val(res.data.allergy || '');
                        $('#avatarPath').val(res.data.avatar || '');
                        if(res.data.avatar) {
                            $('#avatarPreview img').attr('src', res.data.avatar);
                            $('#avatarPreview').show();
                            $('#avatarUpload').hide();
                            $('#avatarUpload').next('small').hide();
                        } else {
                            $('#avatarPreview').hide();
                            $('#avatarUpload').show();
                            $('#avatarUpload').next('small').show();
                        }
                    } else {
                        alert('获取用户信息失败');
                    }
                },
                error: function() {
                    alert('获取用户信息失败');
                }
            });
        }
        loadUserInfo();
        // 添加隐藏的文件输入框
        $('.form-group.col-md-6').has('label[for="avatar"]').append('<input type="file" id="avatarFileInput" accept="image/*" style="display: none;">');
        // 处理头像上传
        $('#avatarFileInput').on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: 'http://localhost:8080/user/upload/avatar',
                    xhrFields: {
                        withCredentials: true  // 👈 添加这行
                    },
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if(res.code === 0) {
                            $('#avatarPreview img').attr('src', res.data);
                            $('#avatarPreview').show();
                            $('#avatarPath').val(res.data);
                            $('#avatarUpload').hide();
                            $('#avatarUpload').next('small').hide();
                        } else {
                            alert(res.message || '头像上传失败');
                        }
                    },
                    error: function() {
                        alert('头像上传失败，请稍后重试');
                    }
                });
            }
        });
        // 触发文件选择
        $('#avatarUpload, #avatarPreview').click(function() {
            $('#avatarFileInput').click();
        });
        // 处理修改按钮点击
        $('#modifyInfoButton').click(function() {
            var userData = {
                nickname: $('#nickname').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                username: $('#username').val(),
                avatar: $('#avatarPath').val()
            };
            $.ajax({
                url: 'http://localhost:8080/user/update',
                xhrFields: {
                    withCredentials: true  // 👈 添加这行
                },
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(userData),
                success: function(res) {
                    if(res.code === 0) {
                        alert('个人信息更新成功');
                        loadUserInfo();
                    } else {
                        alert(res.message || '更新失败');
                    }
                },
                error: function() {
                    alert('更新失败，请稍后重试');
                }
            });
        });
        // 原生弹窗逻辑
        let updateField = '';
        $(document).on('click', '.apply-update-btn', function() {
            updateField = $(this).data('field');
            let label = updateField === 'history' ? '既往史' : '过敏史';
            $('#updateFieldLabel').text('请输入新的' + label);
            $('#newValueInput').val('');
            $('#applyUpdateModal').show();
        });
        $('#closeModalBtn, #cancelModalBtn').click(function(){
            $('#applyUpdateModal').hide();
        });
        $('#submitUpdateBtn').click(function() {
            const newValue = $('#newValueInput').val().trim();
            if (!newValue) {
                alert('请输入新内容');
                return;
            }
            $.ajax({
                url: 'http://localhost:8080/user/updateRequest/apply',
                xhrFields: {
                    withCredentials: true  // 👈 添加这行
                },
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ field: updateField, newValue: newValue }),
                success: function(res) {
                    if (res.code === 0) {
                        alert('申请已提交，等待管理员审核');
                        $('#applyUpdateModal').hide();
                    } else {
                        alert(res.message || '申请失败');
                    }
                },
                error: function() {
                    alert('申请失败，请稍后重试');
                }
            });
        });
    });
</script>
</body>
</html>

</html>
